<template>
  <div class="echartsBox" v-if="a">
    <div class="echarts_left">
      <div :id="id" class="echartsId"></div>
    </div>

    <div class="svgBox flex flex-wrap" v-if="isDays && !isImgs">
      <div v-for="(item, index) in imgList" :key="index" class="svg_item flex items-center h-14">
        <img :src="getImageUrl(item.url)" alt="" class="ml-4 w-11 h-11"/>
        <div class="ml-3">
          <p :class="props.bigFontFlag?'text-xl':'text-xs'" style="width: 200px ;">{{ item.text }}</p>
          <p :class="props.bigFontFlag?'text-xl mt-2':'text-sm mt-2'">{{ item.value }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {nextTick, getCurrentInstance, ref, watch} from 'vue'
import {getImageUrl} from '@/utils'
import {ECharts} from 'echarts'

import {usePatientStore} from '@/store/modules/patient'
import {storeToRefs} from 'pinia'

const usePatient = usePatientStore()
const {isDays} = storeToRefs(usePatient)

const {proxy} = getCurrentInstance() as any
const echarts = proxy.$echarts

type EChartsOption = echarts.EChartsOption

interface imgType {
  url: string
  text: string
  value: string | number
}

interface ReportOption {
  imgList: Array<imgType>
  option: EChartsOption
  id: string,
  bigFontFlag: boolean
}

const props = defineProps<ReportOption>()

const a = ref(true)
const isImgs = ref(false)
let myChart: any = null

watch(
  () => props.option,
  () => {
    if(myChart) {
      myChart.clear()
      myChart.setOption(props.option)
    }
  },
  {deep: true}
)

//初始化echarts
const initEchatrs = () => {
  const chartDom = document.getElementById(props.id)
  myChart = echarts.init(chartDom) as ECharts
  props.option && myChart.setOption(props.option)
  //跟随屏幕大小的变化改变图表的大小
  window.addEventListener('resize', () => {
    myChart.resize({})
  })
  myChart.on('click', (params: any) => {
    myChartClick(params)
  })
}

nextTick(() => {
  initEchatrs()

  // 解决切换了患者之后，睡眠波形图没有宽度的问题
  const chartDom = document.getElementById(props.id);
  let width : number = chartDom?.clientWidth || 0;
  if (width <= 0) {
    window.setTimeout(function () {
      myChart.resize({})
    }, 10);
  }

})

interface EmitEvent {
  (e: 'myChart-click', params: any): void // 当点击图例时会触发该事件
}

const emit = defineEmits<EmitEvent>()
// 点击体例
const myChartClick = (params: any) => {
  emit('myChart-click', params)
}
</script>

<style scoped lang="less">
.echartsBox {
  display: flex;
  width: 100%;
  height: 350px;

  .echarts_left {
    display: flex;
    align-items: center;

    flex: 1;
    position: relative;

    .echartsId {
      width: 100%;
      height: 280px;
    }

    .eqDetail {
    }
  }
}

.svgBox {
  width: 40%;

  .svg_item {
    width: 50%;
  }
}

@media print {
  .echartsBox {
    background-color: yellow;
  }
}
</style>
